<template>
  <div class="edit">
    <div class="head clear">
      <span class="left">头像</span>
      <div class="right">
        <img src="@/assets/bianjiziliao01.png" class="head-img" alt="">
        <img src="@/assets/bianjiziliao02.png" class="arrow-img" alt="">
      </div>
    </div>
    <div class="bind-phone block clear" @click="alert.is_show=true">
      <span class="left">绑定手机</span>
      <span class="right">13711486887</span>
    </div>
    <div class="block">
      <div class="flex">
        <span class="left">昵称</span>
        <span class="right">王京雨</span>
      </div>
    </div>
    <div class="block">
      <div class="flex">
        <span class="left">性别</span>
        <span class="right data">保密 <img src="@/assets/bianjiziliao02.png" alt=""></span>
      </div>
    </div>
    <div class="block">
      <div class="flex">
        <span class="left">生日</span>
        <span class="right data">请选择 <img src="@/assets/bianjiziliao02.png" alt=""></span>
      </div>
    </div>
    <div class="block">
      <div class="flex border-none">
        <span class="left">职业</span>
        <span class="right data">保密 <img src="@/assets/bianjiziliao02.png" alt=""></span>
      </div>
    </div>
    <span class="btn">保存</span>
    <alert-box :alert-message = "alert"  v-if="alert"></alert-box>
  </div>
</template>

<script>


import alertBox from '@/components/alertBox'
  export default {
    components: {
      alertBox,
    },
    data () {
      return {
        alert: {},
      }
    },
    created () {
      this.alert = {
        tip: '手机号已绑定，不允许修改',
        btn: '确定',
        path: {path: '/edit'},
        is_show: false
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.edit
  height 100vh
  background-color #f5f5f5
  .head
    background-color #fff
    margin-bottom 1rem
    position relative
    padding 0 1.5rem
    .left
      float left
      color #202020
      font-size 1.5rem
      line-height 7.8rem
    .head-img
      position absolute
      width 5.9rem
      right 3.2rem
      top 1rem
    .arrow-img
      position absolute
      width .6rem
      right 1.5rem
      top 3.4rem
  .bind-phone
    margin-bottom 1rem
  .block
    background-color #fff
    line-height 5rem
    height 5rem
    color #202020
    font-size 1.5rem
    padding 0 1.5rem
    display flex
    .left
      flex 1
      text-align left
    .right
      flex 1
      text-align right      
    .flex.border-none
      border-bottom none
    .flex
      border-bottom 1px solid #e6e6e6
      display flex
      width 100%
      .right
        color #999
      .data
        position relative
        padding-right 2rem
        img
          position absolute
          width .6rem
          top 2rem
          right 0
  .btn
    background-color #172F6D
    line-height 5rem
    height 5rem
    color #fff
    border-radius 100px
    width 92%
    margin-left 4%
    margin-top 1rem
    display block
    font-weight 500
    font-size 1.7rem
    text-align center
</style>
